<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云计算在线实践平台 - 主页</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/dashboard.css" rel="stylesheet">
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <i class="fas fa-cloud"></i>
            <span>云计算实践平台</span>
        </div>
        <nav class="sidebar-nav">
            <a href="#welcome" class="nav-item active">
                <i class="fas fa-home"></i>
                <span>欢迎页面</span>
            </a>
            <a href="#experiments" class="nav-item">
                <i class="fas fa-flask"></i>
                <span>实验课程</span>
            </a>
            <a href="#profile" class="nav-item">
                <i class="fas fa-user"></i>
                <span>个人中心</span>
            </a>
            <a href="#" class="nav-item logout">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出系统</span>
            </a>
        </nav>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
        <div class="welcome-banner">
            <div class="welcome-text">
                <h2>欢迎回来，<span id="welcomeUsername"></span></h2>
                <p>开始您的云计算学习之旅吧！</p>
            </div>
        </div>
        <!-- 欢迎页面 -->
        <section id="welcome" class="content-section active">
            <div class="welcome-header">
                <div class="tech-dots"></div>
                <h1>欢迎使用云计算在线实践平台</h1>
                <p>开启您的云计算学习之旅</p>
            </div>
            <div class="feature-grid">
                <div class="feature-card">
                    <i class="fas fa-server"></i>
                    <h3>在线实验环境</h3>
                    <p>提供完整的云计算实验环境，随时随地开展实践</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-graduation-cap"></i>
                    <h3>丰富课程资源</h3>
                    <p>涵盖云计算各个领域的精品实验课程</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-project-diagram"></i>
                    <h3>实时操作反馈</h3>
                    <p>即时查看实验结果，快速掌握技能</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-shield-alt"></i>
                    <h3>安全可靠</h3>
                    <p>独立的实验环境，确保操作安全</p>
                </div>
            </div>
        </section>

        <!-- 实验课程页面 -->
        <section id="experiments" class="content-section">
            <h2>实验课程</h2>
            <div class="search-bar">
                <input type="text" id="experiment-search" placeholder="搜索实验课程...">
                <button id="search-btn"><i class="fas fa-search"></i></button>
            </div>
            <div class="experiment-grid">
                <!-- 实验卡片示例 -->
                <div class="experiment-card" data-experiment-id="docker-basic">
                    <div class="card-header">
                        <i class="fas fa-docker"></i>
                        <h3>Docker 容器基础实验</h3>
                    </div>
                    <div class="card-body">
                        <p>学习 Docker 的基本概念和操作，包括容器的创建、管理和部署。</p>
                        <div class="card-meta">
                            <span><i class="fas fa-clock"></i> 2小时</span>
                            <span><i class="fas fa-signal"></i> 入门级</span>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button class="btn-enter">进入实验</button>
                    </div>
                </div>
                <!-- 更多实验卡片可以在这里添加 -->
            </div>
        </section>

        <!-- 个人中心页面 -->
        <section id="profile" class="content-section">
            <div class="profile-header">
                <div class="profile-info">
                    <img src="images/avatar.png" alt="用户头像" class="avatar">
                    <div class="info">
                        <h2>用户名</h2>
                        <p>student@example.com</p>
                    </div>
                </div>
            </div>
            <div class="profile-content">
                <div class="section-tabs">
                    <button class="tab-btn active">我的实验</button>
                    <button class="tab-btn">个人信息</button>
                </div>
                <div class="tab-content">
                    <div class="my-experiments active">
                        <h3>进行中的实验</h3>
                        <div class="experiment-list">
                            <!-- 实验项目示例 -->
                            <div class="experiment-item">
                                <div class="item-info">
                                    <h4>Docker 容器基础实验</h4>
                                    <p>上次访问：2024-04-15 14:30</p>
                                </div>
                                <button class="btn-continue">继续实验</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 实验模态框 -->
    <div class="modal fade" id="experimentModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">实验详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="experiment-info">
                        <div class="info-header">
                            <i class="fas fa-flask"></i>
                            <h3 id="modalExperimentTitle"></h3>
                        </div>
                        <div class="info-meta">
                            <span><i class="fas fa-clock"></i> <span id="modalExperimentDuration"></span></span>
                            <span><i class="fas fa-signal"></i> <span id="modalExperimentDifficulty"></span></span>
                            <span><i class="fas fa-users"></i> <span id="modalExperimentStudents"></span></span>
                        </div>
                        <div class="info-description">
                            <h4>实验简介</h4>
                            <p id="modalExperimentDescription"></p>
                        </div>
                        <div class="info-guide">
                            <h4>实验指导</h4>
                            <button class="btn btn-outline-info" id="downloadGuide">
                                <i class="fas fa-download"></i> 下载实验指导书
                            </button>
                        </div>
                        <div class="container-info" id="containerInfo" style="display: none;">
                            <h4>容器信息</h4>
                            <div class="info-box">
                                <div class="status-box">
                                    <span class="status-label">状态：</span>
                                    <span class="status-value" id="containerStatus">未启动</span>
                                </div>
                                <div class="address-box" id="containerAddress" style="display: none;">
                                    <span class="address-label">访问地址：</span>
                                    <span class="address-value" id="containerUrl"></span>
                                    <button class="btn btn-sm btn-outline-primary copy-btn" id="copyAddress">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                                <div class="timer-box" id="timerBox" style="display: none;">
                                    <span class="timer-label">剩余时间：</span>
                                    <span class="timer-value" id="containerTimer">02:00:00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭窗口</button>
                    <button type="button" class="btn btn-primary" id="startContainer">
                        <i class="fas fa-play"></i> 启动容器
                    </button>
                    <button type="button" class="btn btn-danger" id="stopContainer" style="display: none;">
                        <i class="fas fa-stop"></i> 关闭容器
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="js/dashboard.js"></script>
</body>
</html> 